<template>
  <div id="mine-page" class="mine-box">
    <div class="mine-hader-info-box">
      <div class="header-back-image">
        <img :src="userInfo.headImg">
      </div>
      <div class="mark"></div>
      <div class="mine-info-box">
        <div class="mine-header-img">
          <img :src="userInfo.headImg">
        </div>
        <div class="mine-info">
          <div class="name">{{userInfo.realName}}</div>
          <div class="tenant-info">{{$t('message.mobile.currentTenant')}}：{{userInfo.tenant.shortName}}</div>
        </div>
      </div>
    </div>
    <div class="mine-setting-box">
      <template v-for="(item,index) in settingList"  :key="index">
        <div class="mine-setting-type-box" v-if="!item.hidden">
          <div class="mine-setting-type-item" v-for="(iteml,indexl) in item.list" :key="indexl" @click="handleClick(iteml)">
            <div class="left-icon">
              <svg class="icon" aria-hidden="true">
                <use v-bind:xlink:href="`#${iteml.icon}`"></use>
              </svg>
            </div>
            <div class="setting-name">
              {{$t(iteml.name)}}
            </div>
            <div class="right-icon">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#keowledge-mobile-a-zu4905"></use>
              </svg>
            </div>
          </div>
        </div>
      </template>      
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch ,
  onMounted,
  getCurrentInstance
} from 'vue' 
import type {ComponentInternalInstance} from 'vue'
const instance: any = getCurrentInstance() as ComponentInternalInstance;
const proxy: any = instance.proxy as any; // 访问 proxy 属性
import { useHookI18n } from '@/hooks/i18n'
const { locale,$t } = useHookI18n()
import { setSessionStore, getSessionStore,getStore} from '@/utils/store.js'
import { useRoute, useRouter } from "vue-router"
const router = useRouter();
const route = useRoute()
const emit = defineEmits([""])
const props = defineProps({

})

const settingList = [
  {
    type:'seeting',
    list:[
      {icon:'keowledge-mobile-zhanghushezhi',name:'message.userInfo.accountSet',path:'/mobile/account'},
      {icon:'keowledge-mobile-qiehuanzuhu',name:'message.userInfo.switchTenant',path:'/mobile/switchtenant'},
    ]
  },
  {
    type:'hsz',
    list:[
      {icon:'keowledge-mobile-huishouzhan',name:'message.silder.recycleBin',path:'/mobile/recyclebin'},
    ]
  },
  {
    type:'help',
    hidden:true,
    list:[
      {icon:'keowledge-mobile-bangzhuzhongxin',name:'message.mobile.helpCenter',},
    ]
  },
]
const routerList = ref([])
const userInfo = ref({
  tenant:{}
})

onMounted(()=>{
  routerList.value = getSessionStore({name:'mobileRouterList'}) || []
  userInfo.value = getStore({name:'userInfo'}) || {tenant:{}}
})

function handleClick(val){
  let currentPath = route.fullPath
  if(routerList.value.indexOf(currentPath)!=-1){
    routerList.value.splice(routerList.value.indexOf(currentPath),1)
  }
  routerList.value.push(currentPath)
  setSessionStore({name:'mobileRouterList',content:routerList.value})
  router.push(val.path)
}
</script>
<style lang="scss" scoped>
.mine-box{
  .mine-hader-info-box{
    position: relative;
    height: 12.5rem;
    display: flex;
    align-items: flex-end;
    width: 100%;
    overflow: hidden;
    .header-back-image{
      position: absolute;
      left: 0px;
      top: 50%;
      z-index: -1;
      width: 100%;
      transform: translateY(-50%);
      img{
        width: 100%;
        z-index: 0;
      }
    }
    .mark{
      position: absolute;
      z-index: 1;
      width: 100%;
      height: 12.5rem;
      background: linear-gradient(transparent, #fff);
      backdrop-filter: blur(.625rem);
    }
    .mine-info-box{
      padding: 1.25rem 1.5rem;
      display: flex;
      align-items: center;
      width: 100%;
      z-index: 1;
      .mine-header-img{
        width: 5rem;
        height: 5rem;
        border-radius: .75rem;
        overflow: hidden;
        img{
          width: 5rem;
          height: 5rem;
          border-radius: .75rem;
          overflow: hidden;
        }
      }
      .mine-info{
        margin-left: 1rem;
        max-width: calc(100% - 6.25rem);
        .name{
          color: #363B4C;
          font-size: 1.25rem;
          margin-bottom: .25rem;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          @include SourceHanSansCN-Bold;
        }
        .tenant-info{
          font-size: .875rem;
          color: #363B4C;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          @include SourceHanSansCN-Regular;
        }
      }
    }
  }
  .mine-setting-box{
    padding: 0px .9375rem;
    .mine-setting-type-box{
      border-bottom: 1px solid #eeeFF0;
      padding-top: 1.75rem;
      padding-bottom: 1.625rem;
      .mine-setting-type-item{
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left-icon{
          width: 1rem;
          height: 16px;
          display: flex;
          align-items: center;
        }
        .setting-name{
          display: flex;
          align-items: center;
          margin:0px 1rem;
          color:#363B4C;
          font-size: 1rem;
          width: calc(100% - 4rem);
          @include SourceHanSansCN-Regular;
        }
        .right-icon{
          width: 1rem;
          height: 1rem;
          display: flex;
          align-items: center;
          img{
            width: 1rem;
            height: 1rem;
          }
        }
        .icon{
          width: 1rem;
          height: 1rem;
        }
      }
      .mine-setting-type-item+.mine-setting-type-item{
        margin-top: 1.625rem;
      }
    }
  }
}
</style>